@import '@/styles/common.less';

.out-table-list {
  min-height: calc(100vh - 64px - 48px);
  width: 100%;
}

.numa_container {
  background-color: #fff;
  padding: 32px 32px 16px 32px;
  height: calc(100vh - 64px - 54px - 48px - 20px - 32px - 2px);
  margin: 0 32px 20px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.numa_container_details {
  background-color: #f7f7f7;
  min-height: calc(100vh - 64px - 48px);
  width: 100%;

  .numa_name {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    background-color: #fff;
    // padding-bottom: 32px;
    padding: 23px 0 0 32px;
  }
}

.numa_details_content {
  padding: 0 32px;
  // margin: 0 32px;
  background-color: #fff;
}

.numa_indicator {
  margin: 20px 32px;
  background-color: #fff;
  padding: 38px 32px;

  .numa_list {
    .numa_img_display {
      width: 56px;
    }

    .numa_title_bold {
      font-size: 24px;
      font-weight: bold;
    }

    .numa_title_normal {
      color: #89939b;
      font-size: 16px;
    }
  }
}

@media screen and (max-width: 1279px) {
  .numa_indicator {
    .numa_list {
      .numa_img_display {
        width: 36px;
      }

      .numa_title_bold {
        font-size: 20px;
        font-weight: bold;
      }

      .numa_title_normal {
        color: #89939b;
        font-size: 14px;
      }
    }
  }
}

.numa_info_node {
  display: flex;
  background-color: #fff;
  padding: 32px;
  margin: 0 32px 20px 32px;
  justify-content: center;
  height: auto;
  flex-direction: column;
}

.numa_info_node_indoor {
  display: flex;
  background-color: #fff;
  padding: 8px;
  justify-content: center;
  height: auto;
  flex-direction: column;
}

.indoor_flex_container {
  padding: 0 !important;
}

.node_name {
  background-color: #fff;
  padding: 0 32px;
  font-size: 20px;
  font-weight: bold;
}

.numa_node_title {
  font-size: 16px;
  font-weight: bold;
}

.numa_node_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
}

.numa_node_container {
  padding: 25px 0px;
  display: flex;
  align-items: center;
  // margin-bottom: 50px;
}

.numa_node_container:nth-child(even) {
  flex-direction: row-reverse;
}

.numa_node_container:nth-child(even)::after {
  content: "";
  width: 220px;
  height: 2px;
  background-color: #dcdcdc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1500px) {
  .flex_container {
    padding: 0px !important;
  }
}

@media screen and (max-width: 1480px) {
  .numa_node_container:nth-child(even)::after {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #dcdcdc;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 1620px) and (max-width: 1920px) {
  .flex_container {
    padding: 0 80px !important;
  }

  .numa_node_container:nth-child(even)::after {
    width: 100px !important;
  }
  .numa_node_container:nth-child(odd)::before{
    transform: translate(350px, -262%) !important;
  }
  .numa_node_container:nth-child(even)::before{
    transform: translate(-350px, -262%) !important;
  }
  .liner_length_10{
    width: 90px !important;
  }
}

.numa_node_container:nth-child(n+3) {
  margin-top: 50px;
}

.numa_node_container:nth-child(odd)::before {
  content: "";
  width: 2px;
  height: 50px;
  background-color: #dcdcdc;
  position: absolute;
  transform: translate(385px, -262%);
}

.numa_node_container:nth-child(even)::before {
  content: "";
  width: 2px;
  height: 50px;
  background-color: #dcdcdc;
  position: absolute;
  transform: translate(-385px, -262%);
}

.numa_node_container:nth-child(1)::before,
.numa_node_container:nth-child(2)::before {
  content: "";
  width: 0 !important;
  height: 0 !important;
}

.numa_node_memory_container {
  min-width: 126px;
  height: 139px;
  background-color: rgba(9, 170, 113, 0.20);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.numa_node_memory_occupy {
  width: 100%;
  // height: 106px;
  // background-color: rgba(243,127,17,1.00);
  background: linear-gradient(to bottom, rgba(243, 127, 17, 1.00) 10%, rgba(231, 67, 74, 1.00) 100%);
  border-radius: 6px;
  border: 1px solid #89939b4d;
  position: absolute;
  bottom: 0;
}

.numa_node_memory_free {
  display: flex;
  justify-content: center;
  padding: 8px;
  font-size: 14px;
  color: #333;
  z-index: 999;
  white-space: nowrap;
}

.numa_node_number_container {
  position: relative;
  width: 268px;
  height: 212px;
  background: linear-gradient(180deg, rgba(137, 147, 155, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
  border-radius: 6px;
  border: 1px solid #89939b4d;
  padding: 12px 25px;
  text-align: center;
  // overflow-y: auto;
}

.numa_node_number_container_hidden {
  // position: relative;
  width: 268px;
  height: 212px;
  background: linear-gradient(180deg, rgba(137, 147, 155, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
  border-radius: 6px;
  border: 1px solid #89939b4d;
  padding: 12px 25px;
  text-align: center;
  overflow-y: auto;
}

.grid_template_columns_5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 16px;
  align-items: center;
}

.numa_node_number_occupy_item {
  width: 26px;
  height: 26px;
  margin: 0 5px;
  background: linear-gradient(to bottom, rgba(243, 127, 17, 1.00) 10%, rgba(231, 67, 74, 1.00) 100%);
  border-radius: 6px;
  white-space: nowrap;
  color: #fff;
  text-align: center;
}

.numa_node_number_free_item {
  width: 26px;
  height: 26px;
  margin: 0 5px;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(9, 170, 113, 0.40) 0%, rgba(9, 170, 113, 0.00) 88%);
  border-radius: 6px;
  text-align: center;
  border: 1px solid #09aa71;
}

.liner_length_10 {
  border: 1px solid #89939b;
  width: 122px;
  height: 1px;
}

@media screen and (min-width: 1279px) and (max-width: 1620px) {
  .liner_length_10{
    width: 38px !important;
}
}
@media screen and (min-width: 1279px) and (max-width: 1620px) {
  .numa_node_container:nth-child(even)::after{
    width: 40px !important;
  }
  .numa_node_container:nth-child(odd)::before{
    transform: translate(300px, -262%) !important;
  }
  .numa_node_container:nth-child(even)::before{
    transform: translate(-300px, -262%) !important;
  }

}

.liner_length_30 {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 290px;
  left: 505px;
  z-index: 999;
  transform: rotate(-58deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_left {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 228px;
  left: 505px;
  z-index: 999;
  transform: rotate(-58deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_modal_left {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 294px;
  left: 409px;
  z-index: 999;
  transform: rotate(-58deg);
  transform-origin: center center;
}

.liner_length_30_modal_left_4 {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 125px;
  left: 410px;
  z-index: 999;
  transform: rotate(-57deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_left_3 {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 323px;
  left: 508px;
  z-index: 999;
  transform: rotate(-58deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_right {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 228px;
  left: 505px;
  z-index: 999;
  transform: rotate(58deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_right_modal_4 {
  border: 1px solid #89939b;
  width: 304px;
  height: 1px;
  position: relative;
  top: 127px;
  left: 410px;
  z-index: 999;
  transform: rotate(57deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_length_30_right_4 {
  border: 1px solid #89939b;
  width: 299px;
  height: 1px;
  position: relative;
  top: 326px;
  left: 515px;
  z-index: 999;
  transform: rotate(58deg);
  transform-origin: center center;
  /* 可选：设置旋转中心 */
}

.liner_rows_top {
  width: 162px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 93px;
  left: 575px;
}

.liner_rows {
  width: 162px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  bottom: -355px;
  left: 576px;
}

.liner_rows_modal_4 {
  width: 166px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  bottom: -250px;
  left: 479px;
}

.liner_rows_4 {
  width: 162px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  bottom: -449px;
  left: 576px;
}

.liner_columns_left {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 246px;
  left: 440px;
}

.liner_columns_left_modal_3 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 310px;
  left: 346px;
}

.liner_columns_left_modal_4 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 146px;
  left: 346px;
}

.liner_columns_left_3 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 340px;
  left: 440px;
}

.liner_columns_left_4 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 344px;
  left: 440px;
}

.liner_columns_right {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 296px;
  left: 870px;
}

.liner_columns_right_4 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 395px;
  left: 870px;
}

.liner_columns_right_modal_4 {
  height: 50px;
  width: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 196px;
  left: 776px;
}


.node_footer {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.container_occupy {
  background-color: #fcd72e;
  border: 1px solid #f4840c;
  width: 80px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
  position: relative;
}

.liner_rows_top_number {
  position: relative;
  top: -25px;
  text-align: center;
  font-weight: bold;
}

.liner_length_30_right_number {
  position: relative;
  left: 80px;
  top: -23px;
  font-weight: bold;
}

.liner_length_30_left_number {
  position: relative;
  left: 80px;
  top: 2px;
  font-weight: bold;
}

.liner_rows_number {
  position: relative;
  text-align: center;
  font-weight: bold;
  top: -22px;
}

.grid_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -90px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
  // justify-content: space-between;
}

.grid_modal_1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -38px;
  left: -95px;
  border: 0px;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
  // justify-content: space-between;
}

.grid_modal_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -38px;
  left: -95px;
  border: 0px;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
  // justify-content: space-between;
}

.grid_modal_3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -38px;
  left: -95px;
  border: 0px;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
  // justify-content: space-between;
}

.grid_modal_4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -206px;
  left: -95px;
  border: 0px;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
  // justify-content: space-between;
}

.grid_1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  top: -9px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 40px 0px;
  margin: 17px 0 32px 0px;
  align-items: center;
}

.liner_rows_top_1 {
  width: 152px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 192px;
  left: 588px;
}

.liner_rows_top_modal_2 {
  width: 164px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 162px;
  left: 480px;
}

.liner_rows_top_modal_3 {
  width: 165px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: 162px;
  left: 480px;
}

.liner_rows_top_modal_4 {
  width: 164px;
  height: 1px;
  border: 1px solid #89939b;
  position: relative;
  top: -6px;
  left: 480px;
}

.@{container-prefix}-modal .volcano-config-website-modal-content {
  height: auto;
  // min-width: 1234px;
}

.container_occupy_item {
  background-color: #fcd72e;
  // padding: 10px;
  width: 36px;
  height: 36px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container_occupy_item::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  background-color: #f4840c;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.flex_container {
  display: flex;
  padding: 0 100px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1920px;
  justify-content: flex-start;
  border-radius: 6px;
}

.center_flex {
  justify-content: center;
}

.column_lines {
  height: 50px;
  width: 1px;
  border: 1px solid #ccc;
}

.numa_topo_container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(137, 147, 155, 0.3);
  border-radius: 6px;
  padding: 64px 32px 32px 32px;
}

.@{container-prefix}-input-affix-wrapper {
  border-radius: @button-radius !important;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.@{container-prefix}-input-suffix {
  svg {
    width: 16px;
    height: 17px;
    color: #686868;
  }
}

.numa_modal_allocate {
  border-radius: 6px;
  overflow-y: hidden;

  .@{container-prefix}-modal-content {
    padding: 0 !important;
    max-height: 720px;
    border-radius: 6px;
    overflow-y: auto;
  }

  .@{container-prefix}-modal-header {
    padding: 32px 32px 0 32px;
  }

  .@{container-prefix}-modal-body {
    padding: 32px;
    padding-top: 0px;
  }
}

// @import '@/styles/common.less';

// .container_nav_bar {
//   .@{container-prefix}-menu {
//     background-color: @page-container-color;

//     .@{container-prefix}-menu-item,
//     .@{container-prefix}-menu-submenu-title {
//       height: 48px !important;
//       padding: 6px 20px;
//     }
//   }

//   .collapse_arrow {
//     z-index: 999;
//     position: fixed;
//     cursor: pointer;
//     bottom: 32px;
//     border-radius: 50%;
//     left: 200px;
//     background: @page-container-color;

//     span {
//       padding: 10px;
//       border-radius: 50%;
//       border: 1px solid #dcdcdcff;

//       svg {
//         color: #89939B;
//       }
//     }

//   }
// }

// .collapse_self_bar {
//   .@{container-prefix}-menu {
//     width: 72px;
//   }

//   .collapse_arrow {
//     left: 52px;
//   }
// }

// @media screen and (max-width: 1279px) {
//   .@{container-prefix}-menu {
//     width: 72px;

//     .@{container-prefix}-menu-item-icon {
//       vertical-align: -0.5em !important;
//     }
//   }

//   .container_nav_bar {
//     .collapse_arrow {
//       cursor: not-allowed;
//       left: 52px;
//     }
//   }
// }